<template>
    <baseModel ref="base" spellcheck="false" @touchmove.prevent>
        <router-view v-slot="{ Component }">
            <transition name="animate__animated " enter-active-class="animate__fadeInLeft animate__fast"
                leave-active-class="animate__fadeOutRight animate__faster" mode="out-in">
                <keep-alive ref="keepaliveRef">
                    <component :is="Component" :key="$route.fullPath" v-if="isRouterAlive && $route.meta.onCache" />
                </keep-alive>
            </transition>
            <transition name="animate__animated " enter-active-class="animate__fadeInLeft animate__fast"
                leave-active-class="animate__fadeOutRight animate__faster" mode="out-in">
                <component :is="Component" :key="$route.fullPath" v-if="!$route.meta.onCache" />
            </transition>
        </router-view>
    </baseModel>
</template>

<script setup>
import router from "@/router"
import { useMouseType } from "@usehook"
import { setForceRefresh } from "@/hooks/useRequest"
import { keepaliveRef, removeKeepalive } from "@/utils/keepalive"
import { addEmitterListener } from "@/utils/eventbus"
import { useTemplateRef } from "vue"
import iconfont from "@/assets/icon/iconfont.woff2?t=1689449444"
import { loadFont } from "@/utils/tools"
import storeInstance, { storeToRefs } from "@/pinia"

//body添加el-popup-parent--hidden,避免windows下dialog出现body偏移
document.body.classList.add('el-popup-parent--hidden')

useMouseType(() => { return { showMouse: true, showPaoPao: false } })

let isRouterAlive = $ref(true)

const reload = () => {
    if (!isRouterAlive || router.currentRoute.value.path === '/') return
    isRouterAlive = false
    removeKeepalive(router.currentRoute.value.fullPath, false)
    if (router.currentRoute.value.path === "/commonResponse") {
        storeInstance.mainStore.setApiInfo()
    }
    setTimeout(() => {
        isRouterAlive = true
    }, 200)
}

const forbidRightClick = () => {
    document.oncontextmenu = () => {
        return false
    }
}

const forbidDragstart = () => {
    document.ondragstart = () => {
        return false
    }
}

const { getForceRefresh } = storeToRefs(storeInstance.mainStore)

setForceRefresh(getForceRefresh)

onMounted(() => {
    forbidRightClick()
    forbidDragstart()
    keepaliveRef.value = useTemplateRef("keepaliveRef")
    addEventListener("keydown", (e) => {
        const { key } = e
        if (key === "F5") {
            e.preventDefault()
            storeInstance.mainStore.setForceRefresh()
            reload()
        }
    })
    addEmitterListener("refresh", () => {
        reload()
    })
    loadFont(iconfont)
})
</script>